﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>

  <script type="text/javascript" src="../../Scripts/OpenLayers.js"></script>
  <script type="text/javascript" src="../../Scripts/jquery-1.4.4.js"></script>

  <script type="text/javascript">

        var map = null;
        var layer = null;
        var control = new OpenLayers.Control();
        var vectorLayer = null;
        var pointControl = null;
        var lineControl = null;
        var polygonControl = null;

        function InitMap(Container) {
            var options = {
                maxExtent: new OpenLayers.Bounds(-92, 7, -77, 18)
            };
            map = new OpenLayers.Map(Container, options);
            layer = new OpenLayers.Layer.ArcGIS93Rest("Arcgis Server Layer", "http://win-5ar29nj7nce/ArcGIS/rest/services/AmericanMap/MapServer/export", { layers: "show:0,2" });
            map.addLayer(layer);
            map.zoomToMaxExtent();

            AddVectorLayer();
            AddPointControl();
            AddLineControl();
            AddPolygonControl();
        }

        //查询结果
        function QueryByFeature(feature) {
            if (feature == null) return;
            var wktFormat = new OpenLayers.Format.WKT();
            var wktString = wktFormat.write(feature);
            vectorLayer.removeAllFeatures();
            $.ajax(
            {
                url: "Map/Map?feature=" + wktString,
                data: {"feature":wktString},
                datatype:"json",
                type:"POST",
                traditional: true,
                success: ShowQueryResult
            }
            );
        }

        //展示查询结果
        function ShowQueryResult(data) {
            if (data == null) return;
            var wktData = data[0].feature;
            alert(wktData);
            var wktFormat = new OpenLayers.Format.WKT();
            var openLayerFea = wktFormat.read(wktData);
            if (openLayerFea != null) {
               vectorLayer.addFeatures(openLayerFea);
            }
        }

        //增加矢量图层
        function AddVectorLayer() {
            vectorLayer = new OpenLayers.Layer.Vector("vector");
            map.addLayer(vectorLayer);
        }

        //增加画点控件
        function AddPointControl() {
            pointControl = new OpenLayers.Control.DrawFeature(vectorLayer, OpenLayers.Handler.Point);
            pointControl.featureAdded = QueryByFeature;
            map.addControl(pointControl);
        }

        //增加画线控件
        function AddLineControl() {
            lineControl = new OpenLayers.Control.DrawFeature(vectorLayer, OpenLayers.Handler.Path);
            lineControl.featureAdded = QueryByFeature;
            map.addControl(lineControl);
        }

        //增加画多边形控件
        function AddPolygonControl() {
            polygonControl = new OpenLayers.Control.DrawFeature(vectorLayer, OpenLayers.Handler.Polygon);
            polygonControl.featureAdded = QueryByFeature;
            map.addControl(polygonControl);
        }

        function ActiveDrawControl(id) {
            if (id == "Line") {
                polygonControl.deactivate();
                pointControl.deactivate();
                lineControl.activate();
            }
            else if (id == "Point") {
                polygonControl.deactivate();
                pointControl.activate();
                lineControl.deactivate();
            }
            else if (id == "Polygon") {
                polygonControl.activate();
                pointControl.deactivate();
                lineControl.deactivate();
            }
        }

   </script>

<head>
    <title>Map</title>

    <style type="text/css">
        #MapContainer{width:100%;height:95%;}
        #MapMenu{width:100%;height:5%;}
    </style>

</head>

<body onload="InitMap('MapContainer')">
<div style="width:100%;height:800px";>

    <!--菜单窗口-->
    <div id="MapMenu" class="MapMenu">

    <span id="Line" class="MapButton"><img src="../../img/globe.gif" alt="点" ondblclick="ActiveDrawControl('Line')"/></span>
    <span id="Point" class="MapButton"><img src="../../img/folder.gif"  alt="线" ondblclick="ActiveDrawControl('Point')"/></span>
    <span id="Polygon" class="MapButton"><img src="../../img/question.gif" alt="面" ondblclick="ActiveDrawControl('Polygon')"/></span>

    </div>

    <!--地图窗口-->
    <div id="MapContainer" class="MapContainer"> 
    </div>
</div>
</body>

</html>
